<template>
  <div>
    <p style="margin:50px;font-size:20px;">
      人生就像一张磁盘
      烦恼可以删除
      快乐可以拷贝
    </p>

    <div :style="bgimg" class="login">
      <center>
        <Form ref="formInline" :model="formInline" :rules="ruleInline" style="padding-top:30px;">
          <FormItem>
            <div class="login_text">今日头条后台登陆</div>
          </FormItem>
          <FormItem prop="user" style="width:250px">
            <Input type="text" v-model="formInline.user" placeholder="用户名">
              <Icon type="ios-person-outline" slot="prepend"></Icon>
            </Input>
          </FormItem>
          <FormItem prop="password" style="width:250px">
            <Input type="password" v-model="formInline.password" placeholder="密码">
              <label>密码</label>
              <Icon type="ios-lock-outline" slot="prepend"></Icon>
            </Input>
          </FormItem>
          <FormItem>
            <Button type="primary" @click="handleSubmit('formInline')">登录</Button>
            <Button type="primary" @click="handleRegister">注册</Button>
          </FormItem>
        </Form>
      </center>
    </div>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      bgurl: require("../assets/loginb.jpg"),
      bgimg: {
        backgroundImage: "url(" + require("../assets/loginb.jpg") + ")"
      },
      formInline: {
        user: "",
        password: "",
      },
      ruleInline: {
        user: [
          {
            required: true,
            message: "请输入用户名",
            trigger: "blur"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: "blur"
          },
          {
            type: "string",
            min: 6,
            message: "密码长度不能少于六位",
            trigger: "blur"
          }
        ]
      },
      academyList: []
    };
  },
  methods: {
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
          this.handleLogin();
        } else {
          this.$Message.error("失败!");
        }
      });
    },
    handleRegister() {
      this.$router.push("/register");
    },
    handleLogin: function() {
      this.storeUser();

    },
    isCorrect() {
      let url = "/login";
      var TUser = {
          uName: this.formInline.user,
          uPassword: this.formInline.password
      }
      axios({
        method: "post",
        url: url,
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        },
        data: TUser
      })
        .then(response => {
          console.log(response);
          // if (response.data.password == "true") {
          //   this.$Message.success("成功登陆");
          //   this.storeUser();
          //   this.$router.push("/hello");
          // } else {
          //   this.$Message.error("密码错误");
          // }
        })
        .catch(error => {
          console.log(error);
        });
    },
    storeUser() {
      var t_user = {
        username: this.formInline.user,
        password: this.formInline.academy,
        academy: this.formInline.selectValue,
        power: [],
        isAdmin: this.formInline.switchVlaue,
        isLogin: true
      };
      this.$store.dispatch("storeUser", t_user);
      //console,log(this.$store.getter.user)
    },
    ifAdmin() {
      if (this.formInline.switchVlaue == true) {
        return true;
      } else {
        return false;
      }
    },
    ifSelected() {
      if (this.formInline.selectValue == "") {
        return true;
      } else {
        return false;
      }
    },
    isRoot() {
      if (
        this.formInline.user == "root" &&
        this.formInline.password == "123456"
      ) {
        return true;
      } else {
        return false;
      }
    },
    changeSwitch() {
      //console.log(this.formInline.switchVlaue)
    },
  },
  mounted() {
    this.getAcademyList();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.login {
  width: 550px;
  height: 350px;
  margin-left: 600px;
  margin-top: 150px;
  background-image: rgba(0.5);
  font-size: 30px;
}
.login_text {
  font-size: 50px;
}
</style>
